package myJs.cps

import myJs.myPkg.DatepickerOptions
import myJs.myPkg.jquery.$
import org.scalajs.dom.Event
import org.scalajs.dom.html.Input
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._
import myJs.Implicits._
import myJs.tool.Tool

/**
 * Created by yz on 21/1/2022
 */
@react object PureDatePickerCp {

  case class Props(placeHolder: String = "", name: String = "", onChangeF: String => Unit, value: String)

  val component = FunctionalComponent[Props] { props =>

    val inputRef = React.createRef[Input]

    useEffect(() => {
      val options = DatepickerOptions(format = Tool.pattern, autoclose = true, forceParse = true, language = "zh-CN")
      $(inputRef.current).datepicker(options)
    }, List()
    )

    useEffect(() => {
      $(inputRef.current).offThenOn("changeDate", (e: Event) => {
        val myV = e.target.asInstanceOf[Input].value
        props.onChangeF(myV)
      })
      () => {
        $(inputRef.current).off("changeDate")
      }
    }
    )

    useEffect(() => {
      $(inputRef.current).datepicker("update", props.value)
    }, List(props.value)
    )


    input(`type` := "text", className := "filterInput form-control startTime",
      name := props.name, width := "100%", placeholder := props.placeHolder, readOnly := true, ref := inputRef,
      value := props.value)

  }

}
